import React, { Component } from 'react'

// https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/



class Box extends Component {

    // 监听组件卸载
    componentWillUnmount() {
        console.log('组件被卸载了');
    }

    render() {
        return <h1>Box 组件</h1>
    }
}

export default class App extends Component {


    state = {
        count: 100
    }

    // ---------------- 挂载阶段 ------------------
    constructor(props) {
        super(props)

        console.log('constructor');
    }

    // getDerivedStateFromProps 会在调用 render 方法之前调用，
    // 并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，
    // 如果返回 null 则不更新任何内容。
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps', props, state);

        // return null
        // 返回对象中的内容，就是要修改的内容
        return {
            count: state.count + 1
        }
    }
    // ********** 挂载阶段执行，一般可以在这里进行数据请求
    componentDidMount() {
        console.log('componentDidMount');
    }


    // -------------- 更新阶段
    // 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出
    // 是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化
    // 组件都会重新渲染。大部分情况下，你应该遵循默认行为。
    shouldComponentUpdate(nextProps, nextState) {
        // console.log(nextProps, nextState);

        if (nextState.count == 105) {
            // 返回 false 的时候不会做重新渲染，不会调用 render 了
            return false
        } else {
            // 返回 true 需要调用 render 重新渲染
            return true
        }
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 这里可以获取到更新之前的值
        // 会在更新到 DOM 之前执行

        // 返回的内容会传递到 componentDidUpdate 的第三个参数进行使用
        return '你好世界'
    }

    // *********** 组件更新
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(prevProps, prevState, snapshot);
    }




    // ************ 会在挂载和更新阶段执行
    render() {
        return (
            <div>
                <h1>App -- {this.state.count}</h1>

                <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }} >修改 count </button>

                <hr />
                {this.state.count == 101 && <Box />}
            </div>
        )
    }

}
